<%@ taglib uri="/struts-tags" prefix="s"%>
<header id="header">
	<div class="row large-nav">
		<div class="column large-6 medium-7 right-nav-column">
			<s:form action="searching" namespace="/" method="GET"
				cssClass="ng-pristine ng-valid" theme="simple">
				<ul class="inline-list no-margin-bottom">
					<li><a href="http://www.shiplanet.com"><img
							class="extra-small-padding-top"
							src="/images/shiplanet-logo-header-w80-m.png" alt="Shiplanet"></a></li>
					<li class="small-padding-top"><s:textfield name="keyword"
							cssClass="large-search" id="q" placeholder="search..." /></li>
					<li class="small-padding-top">
						<button class="small">
							<i class="no-margin-right fa fa-search left-side"></i><span
								class="hide-text-medium">Search</span>
						</button>
					</li>
				</ul>
			</s:form>
		</div>
		<div class="column large-6 medium-5 left-nav-column">
			<ul class="inline-list right no-margin-bottom">
				<li class="nav-button small-padding-top"><a class="topnav-btn"
					rel="nofollow" href="http://www.shiplanet.com">Signup</a></li>
				<li class="nav-button small-padding-top"><a class="topnav-btn"
					rel="nofollow" href="http://www.shiplanet.com">Login</a></li>
				<li class="hide-text-medium nav-button small-padding-top"><a
					class="topnav-btn" href="http://www.shiplanet.com">Contact</a></li>
				<li class="small-padding-top medium-nav"><a
					href="http://www.shiplanet.com">Browse</a></li>
				<li class="nav-button small-padding-top">
				<s:url action="uploading" namespace="" var="step1" />
				<s:a
					href="%{step1}"
					cssClass="orange button small inverse"><span
						class="hide-text-medium">List Your Items</span><span
						class="hide-text-large">List Item</span></s:a></li>
			</ul>

		</div>
	</div>
	<nav class="top-bar mobile-nav" style="">
		<ul class="title-area">
			<!-- Title Area -->
			<li class="name mobile-nav-background">
				<h1>
					<a
						href="http://www.shiplanet.com"><img
						class="mobile-logo" src="/images/shiplanet-logo-header-w80-m.png" alt=""></a>
				</h1>
			</li>
			<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
			<li class="toggle-topbar menu-icon"><a
				href="http://www.shiplanet.com"><span>Menu</span></a></li>
		</ul>
		<section class="top-bar-section mobile-nav-dropdown">
			<!-- Left Nav Section -->
			<ul class="left">
				<li class="divider"></li>
				<li class="has-form"><s:form action="searching" namespace="/"
						method="GET" cssClass="ng-pristine ng-valid">
						<div class="row collapse">
							<div class="small-8 columns">
								<s:textfield name="keyword" cssClass="large-search" id="q"
									placeholder="search..." />
							</div>
							<div class="small-4 columns">
								<button class="small-margin-left small">
									<i class="fa fa-search"></i>
								</button>
							</div>
						</div>
					</s:form></li>
				<li class="divider"></li>
				<li><a href="http://www.shiplanet.com">Browse
						Listings</a></li>
				<li class="divider"></li>
				<li><a class="topnav-btn" rel="nofollow"
					href="http://www.shiplanet.com">Signup</a></li>
				<li class="divider"></li>
				<li><a class="topnav-btn" rel="nofollow"
					href="http://www.shiplanet.com">Login</a></li>
				<li class="divider"></li>
				<li><a href="http://www.shiplanet.com">How It
						Works</a></li>
				<li class="divider"></li>
				<li><a href="https://www.shiplanet.com">Contact</a></li>
			</ul>
		</section>
	</nav>
</header>